<template>

  <div>
    <Layout>
      <Content class="layout-content">

        <Row>
          <Col span="24">
            <div class="editor" ref="divRef"></div>
          </Col>
        </Row>
      </Content>
    </Layout>

  </div>


</template>

<script setup>
import {onMounted, ref, defineExpose} from "vue";
import moment from "moment";
import {Message} from 'view-ui-plus'
import Editor, {
  ElementType,
  RowFlex,
} from '@hufe921/canvas-editor';


const divRef = ref()

const editor = ref();
onMounted(() => {
  editor.value = new Editor(divRef.value,
      {
        header: [
          {
            value: '',
            rowFlex: RowFlex.CENTER
          }
        ],
        main: [
          {
            value: ''
          }
        ],
        footer: [
          {
            value: '',
            size: 12
          }
        ]
      },
      {

        margins: [100, 120, 100, 120],
        // watermark: {
        //   data: 'CANVAS-EDITOR',
        //   size: 120
        // },
        pageNumber: {
          format: '第{pageNo}页/共{pageCount}页'
        },
        placeholder: {
          data: '请输入正文'
        },
        maskMargin: [60, 0, 30, 0] // 菜单栏高度60，底部工具栏30为遮盖层
      }
  );
  Reflect.set(window, 'editor', editor.value)
})


</script>
<style scoped>
</style>